/**
 * Created by Administrator on 2016/8/2 0002.
 */
'use strict';
import React, {Component} from 'react';
import {View , Navigator, TextInput , Image , Text , StyleSheet,ToastAndroid,TouchableHighlight,Platform} from 'react-native';
import RepairList from './RepairList';
var api = require("../api/Api.js");
var STORE = require("../utils/Store");

class LoginView extends Component{
    constructor (props) {
        super(props)
        this.state={
            username :'',
            password :'',
        }
    }
    /**
     * 登录
     * @returns {Promise.<TResult>}
     * @private
     */
    _login() {
        var navigator = this.props.navigator;
        var requestbody={
            header:{
                SESSION_TOKEN:'1111',
                UUID:'1111'
            },
            payload:{
                LOGIN_ID:this.state.username,
                USER_PWD:this.state.password,
            }
        }

        fetch(api.LOGIN_API,{
             method: 'POST',
             headers: {
                 'Accept': 'application/json',
                 'Content-Type': 'application/json',
             },
             body: JSON.stringify(requestbody)
             })
            .then((response) =>{
                console.log(response);
                var contentType = response.headers.get("content-type");
                if(contentType && contentType.indexOf("application/json") !== -1) {
                     response.json().then(function(json) {
                         if(json['success']==1){
                            STORE.user = json['data'];
                            navigator.push({
                                title:"RepairList",
                                component: RepairList
                            });
                         }else{
                            ToastAndroid.show(json['message'],1000);
                         }
                    });
                } else {
                    console.log("Oops, we haven't got JSON!");
                }
            } )
    }


    _focusNextField(nextField) {
        this.refs[nextField].focus();
    }
    render(){
        return(
            <View style={styles.container}>
                <View style={{alignItems:'center',justifyContent:'center'}}>
                <Image source={require('./img/logo.png')}
                  style={styles.logo}/>
                    <Text style={styles.logotext}>电梯大叔</Text>
                </View>

                <View style={styles.inputbg}>
                    <View style={{flexDirection:'row' ,alignItems:'center'}}>
                        <Image source={require('./img/zhanghao_icon.png')}
                            style={{width:26, height:26, marginLeft:15}}/>
                        <TextInput
                            ref='1'
                            autoCapitalize="none"
                            inlineImageLeft={'./img/pass_icon.png'}
                            returnKeyLabel={'next'}
                            placeholder={'请输入账号'}
                            underlineColorAndroid={'white'}
                            placeholderTextColor={'#999999'}
                            selectionColor={"#ffffff"}
                            style={styles.textInput}
                            onChangeText={(text) => this.setState({username:text})}
                            onSubmitEditing={() => this._focusNextField('2')}>
                        </TextInput>
                        </View>
                    <View style={{height:1,backgroundColor:'#d8d8d8'}}/>
                    <View style={{flexDirection:'row' ,alignItems:'center'}}>
                        <Image source={require('./img/pass_icon.png')}
                               style={{width:26, height:26, marginLeft:15}}/>
                    <TextInput
                        ref='2'
                        inlineImageLeft="ic_menu_black_24dp"
                        secureTextEntry={true}
                        placeholder={'请输入密码'}
                        underlineColorAndroid={'white'}
                        placeholderTextColor={'#999999'}
                        onChangeText={(text) => this.setState({password:text})}
                        style={styles.textInput}/>
                        </View>
                </View>
                <TouchableHighlight
                    onPress={this._login.bind(this)}
                    style={styles.button}
                    activeOpacity={0.7}
                    underlayColor={'#0a85fb'}>
                        <Text style={{color:'white',fontSize:18}}>登录</Text>
                </TouchableHighlight>
            </View>
        );
    }
}

var styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor: '#1b91ff',
    },
    logo:{
        width:100,
        height:100,
        marginTop:100,
        alignItems:'center',
        justifyContent:'center',
    },
    logotext:{
        fontSize:20,
        color:'white',
        marginTop:13,
    },
    inputbg:{
        backgroundColor:'white',
        borderRadius:10,
        height:96,
        marginTop:80,
        marginLeft:20,
        marginRight:20,
    },
    textInput:{
        flex:1,
        height:48,
        borderColor:'white',
        borderWidth:0,
        marginLeft:10,
    },
    button:{
        marginTop:17,
        marginLeft:20,
        marginRight:20,
        backgroundColor:'#0a85fb',
        height:42,
        borderRadius:10,
        justifyContent:'center',
        alignItems:'center'
    },
});
module.exports = LoginView;